@charset "UTF-8";
/* -------------------------------------------------
 * index modules css
 * ------------------------------------------------- */
// section
.section{
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid #ccc;
	h2{
		font-size: 22px;
		font-weight: normal;
		color: $themeColor;
		text-align: center;
		margin: 10px 0 20px;
		font-family: Arial,"FZZH","Microsoft Yahei",sans-serif;
		span{
			padding-left: 10px;
		}
	}
	.msg{
		font-size: 14px;
		position: relative;
		height: 500px;
		background: #f6f6f8 url(../img/coffee-cup.png) no-repeat right bottom;
		@include dbshadow;
		@at-root .tag{
			display: block;
			position: absolute;
			z-index: 99;
			background: url(../img/tv-bg-l.png) no-repeat center;
			width: 153px;
			height: 110px;
			line-height: 100px;
			font-family: Arial;
			text-align: center;
			color: #93e8ff;
			font-size: 22px;
			text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
			transform-origin: left bottom;
			b{
				display: inline-block;
				transform: rotateZ(-7deg);
			}
		}
		.tag{
			left: -60px;
			top: -30px;
		}
		.art-cont{
			margin: 10px 0;
			p{
				text-indent: 2em;
				line-height: 1.5;
			}
		}
		article.right-art{
			margin-right: 120px;
		}
	}
}

#boutique{
	margin: 20px 0;
	@at-root .boutique-rec{
		width: 100%;
		position: relative;
		padding-left: 47px;
		background: url(../img/ruler-bg.png) repeat-y left top;
		.tag{
			left: -60px;
			top: 12px;
		}
		ul{
			width: 1153px;
			padding-bottom: $defaultMargin/2;
			background-color: #f0f0f0;
		}
		li{
			float: left;
			width: 282px;
			margin: $defaultMargin/2 0 0 $defaultMargin/2;
			position: relative;
			.rec-pan{
				color: #333;
				padding: 0 10px;
				.rec-tit{
					padding: 5px 0;
					height: 24px;
					overflow: hidden;
				}
				.rec-like{
					padding-bottom: 5px;
					i{
						margin-right: 2px;
						&.fa-heart-o{
							color: #fd5a46;
						}
						&.fa-circle-o{
							color: #97ceec;
						}
					}
				}
			}
			.rec-img{
				height: 282px;
				line-height: 282px;
				background-color: $white;
				width: 100%;
				overflow: hidden;
				position: relative;
				display: block;
				background-color: #fff;
				&:hover{
					img{
						transform: translate3d(0,-10px,0);
					}
				}
				img{
					@include transformTransition;
					@include imgCenter;
				}
			}
			&.rec-big{
				width: 569px;
				a.rec-img{
					width: 569px;
					height: 603px;
					line-height: 603px;
				}
			}
		}
	}
}

#panel{
	width: 100%;
	.hot-massage{
		float: left;
		width: 50%;
		height: 600px;
		position: relative;
		article{
			padding: 10px 20px;
			min-height: 188px;
			h3{
				font-size: 16px;
				height: 50px;
				font-weight: normal;
				line-height: 38px;
				position: relative;
				a{
					color: $themeColor;
					font-size: 14px;
				}
				b{
					position: absolute;
					right: 100px;
					bottom: 15px;
					font-size: 12px;
					color: #999;
					line-height: 1;
				}
			}
			.sh{
				display: table;
				width: 100%;
				border-bottom: 1px dotted #ccc;
			}
			span{
				display: table-cell;
				padding: 5px;
				font-size: 12px;
				a{
					color: $defaultColor;
					text-decoration: none;
					&:hover{
						color: $themeColor;
					}
				}
				i{
					font-weight: bold;
					margin-right: 0;
				}
				&.sh-store{
					color: #eda941;
				}
				&.sh-wb{
					color: #f10000;
				}
				&.sh-com{
					color: #62b8de;
				}
			}
		}
		a.see-more-btn{
			background-color: $themeColor;
			color: $white;
			text-decoration: none;
			z-index: 1;
			&:hover{
				background-color: $themeHoverColor;
			}
		}
	}
	.new-article{
		float: right;
		width: 50%;
		background-size: 100%;
		.usr-box{
			background: url(../img/dotted-line.png) no-repeat center;
			background-size: 100%;
			position: relative;
			float: left;
			width: 350px;
			height: 500px;
			span{
				position: absolute;
				height: 80px;
				width: 80px;
				border-radius: 50%;
				overflow: hidden;
				@include box-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
			}
			.usr-1{
				left: 66px;
    			top: 56px;
			}
			.usr-2{
				right: 17px;
    			top: 56px;
			}
			.usr-3{
				left: 66px;
    			top: 260px;
			}
			.usr-4{
				right: 17px;
    			top: 260px;
			}
		}
		.side-talk{
			float: right;
			height: 500px;
			width: 250px;
			background-color: #eff0f1;
			position: relative;
			@include dbshadow($bot:20px,$wid:100px,$rotate:10deg,$br:23px);
			.art-tab{
				display: table;
				width: 100%;
				span{
					font-size: 14px;
					display: table-cell;
					text-align: center;
					vertical-align: middle;
					height: 32px;
					width: 50%;
					background-color: transparent;
					border-bottom: 1px solid #18b6ff;
					a{
						display: block;
						color: #565656;
						font-weight: normal;
						text-decoration: none;
					}
				}
				span.focus{
					background-color: #18b6ff;
					a{
						color: $white;
					}
				}
			}
			.art-cont{
				width: 100%;
				line-height: 1.5;
				@at-root .art-box{
					display: none;
					&.cont-active{
						display: block;
					}
					dl{
						display: table;
						padding: 0 10px;
						overflow: hidden;
					}
					dt,dd{
						vertical-align: top;
						display: table-cell;
					}
					dt{
						vertical-align: top;
						padding-top: 15px;
						width: 32px;
						a{
							display: block;
							overflow: hidden;
							border-radius: 50%;
						}
						img{
							width: 32px;
							height: 32px;
						}
					}
					dd{
						padding: 7px 10px;
						width: 178px;
						word-wrap: break-word;
						word-break: break-all;
						&>span{
							display: block;
							text-align: right;
						}
						.art-tit{
							width: 100%;
							word-wrap: break-word;
							word-break: break-all;
							overflow: hidden;
							i.fa{
								font-size: 16px;
								&.fa-quote-left{
									margin-right: 6px;
								}
								&.fa-quote-right{
									margin-left: 6px;
								}
							}
							p,b,span{
								display: inline;
							}
						}
					}
				}
			}
		}
	}
}

#appraisal{
	width: 100%;
	.appraisal{
		position: relative;
		.tag{
			right: -38px;
    		top: 25px;
    		background: url(../img/tv-bg-r.png) no-repeat center;
			b{
				transform: rotateZ(5deg);
			}
		}
		@at-root .apr-l{
			float: left;
			margin-right: 10px;
			width: 736px;
			.apr-ad{
				height: 384px;
				width: 736px;
				margin-bottom: 20px;
				position: relative;
			}
			.apr-img{
				width: 100%;
				height: 100%;
				background-color: $white;
				display: block;
				position: relative;
				overflow: hidden;
				.apr-img-cell{
					width: 100%;
					height: 100%;
					display: block;
					transition: opacity 0.5s ease 0s, transform 0.35s ease 0s;
				}
				img{
					@include imgCenter;
				}
				&:hover{
					.apr-img-cell{
						opacity: 0.8;
						filter: Alpha(opacity=80);
						transform: scale(0.9);
					}
					.inner-tit{
						opacity: 1;
						filter: Alpha(opacity=100);
						&:before{
							transform: scale(1);
							transition: opacity 0.5s ease 0s, transform 0.35s ease 0s;
						}
					}
					.inner-tit-cell{
						transform: translate3d(0,0px,0px);
				    	opacity: 1;
					}
				}
			}
			.inner-tit{
				background: $deepAlpha;
				background-color: #aaa \9;
			    color: $white;
			    position: absolute;
			    top: 0;
			    left: 0;
			    opacity: 0;
			    filter: Alpha(opacity=0);
			    display: table;
			    height: 100%;
			    width: 100%;
			    overflow: hidden;
			    text-align: center;
			    transition: opacity 0.5s ease 0s, transform 0.35s ease 0s;
			    &:before{
			    	border: 1px solid #fff;
				    bottom: 20px;
				    content: "";
				    left: 20px;
				    position: absolute;
				    right: 20px;
				    top: 20px;
				    transform: scale(1.5);
				    transition: opacity 0.5s ease 0s, transform 0.35s ease 0s;
			    }
			    .inner-tit-cell{
			    	display: table-cell;
			    	padding: 30px;
			    	width: 100%;
			    	height: 100%;
			    	vertical-align: middle;
			    	text-align: center;
			    	transform: translate3d(0px,-20px,0px);
			    	opacity: 0.2;
			    	transition: opacity 0.5s ease 0.1s, transform 0.35s ease 0.1s;
			    }
			}
			.apr-list{
				height: 220px;
				width: 100%;
				ul{
					width: 780px;
				}
				li{
					height: 220px;
					width: 232px;
					float: left;
					margin-right: 20px;
					position: relative;
				}
			}
		}
		.apr-r{
			background-color: #ecedee;
			float: right;
			width: 444px;
			height: 625px;
		}
	}
	.apr-menu{
		padding: 40px 65px;
		li{
			cursor: pointer;
			text-align: center;
			position: relative;
			display: block;
			z-index: 1;
			width: 130px;
			height: 130px;
			border-radius: 50%;
			box-shadow: -1px 2px 8px rgba(0,0,0,0.25);
			transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-webkit-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transition:transform 0.3s ease 0s;
			&:nth-child(even){
				margin-left: 200px;
				margin-top: -50px;
			}
			a{
				background: -moz-radial-gradient(50% 50%, circle cover, #cbd8df 0%, #a2acb0 100%);/* FF3.6+ */
				background: -webkit-radial-gradient(50% 50%, circle cover, #cbd8df 0%, #a2acb0 100%);/* Chrome10+,Safari5.1+ */
				background: -o-radial-gradient(50% 50%, circle cover, #cbd8df 0%, #a2acb0 100%);/* Opera 11.10+ */
				background: -ms-radial-gradient(50% 50%, circle cover, #cbd8df 0%, #a2acb0 100%);/* IE10+ */
				background: radial-gradient(50% 50%, circle cover, #cbd8df 0%, #a2acb0 100%);/* W3C */
				border: 5px solid #fff;
				border-radius: 50%;
				width: 100px;
				height: 100px;
				line-height: 100px;
				display: inline-block;
				text-decoration: none;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				overflow: hidden;
				z-index: 3;
				color: $white;
				font-size: 20px;
				font-weight: bold;
				&:after{
					background-color: rgba(255, 255, 255, 0.4);
				    border-radius: 50%;
				    content: "";
				    height: 110%;
				    left: -20%;
				    position: absolute;
				    top: -20%;
				    width: 110%;
				    transition: transform 0.2s ease-out 0.1s;
				    z-index: -1;
				}
			}
			span{
				font-size: 22px;
				color: $white;
				text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
				line-height: 1;
				position: absolute;
				left: 50%;
				top: 50%;
				z-index: 101;
				transform: translate3d(-50%,-50%,0) scale(0.1);
				opacity: 0;
				transition: opacity 0.2s ease-out 0.1s,transform 0.3s ease-out 0.1s;
			}
			&:hover{
				span{
				}
				a:after{
					transform: translate3d(15%,15%,0);
				}
			}
			&:nth-child(1){
				a{
					color: #b1511c;
				}
			}
			&:nth-child(2){
				a{
					color: #268813;
				}
			}
			&:nth-child(3){
				a{
					color: #2fb3c7;
				}
			}
			&:nth-child(4){
				a{
					color: #ba2fc7;
				}
			}
			&:nth-child(5){
				a{
					color: #b1511c;
				}
			}
			&:nth-child(even):hover{
				span{
					opacity: 1;
					transform: translate3d(25px, -60px, 0px);
				}
			}
			&:nth-child(odd):hover{
				span{
					opacity: 1;
					transform: translate3d(-108px, -65px, 0px);
				}
			}
			&:after{
				background: -moz-linear-gradient(270deg, #d5d5d5 0%, rgba(0,0,0,0) 100%);/* FF3.6+ */
				background: -webkit-gradient(linear, 270deg, color-stop(0%, #d5d5d5), color-stop(100%, #ffffff));/* Chrome,Safari4+ */
				background: -webkit-linear-gradient(270deg, #d5d5d5 0%, rgba(0,0,0,0) 100%);/* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(270deg, #d5d5d5 0%, rgba(0,0,0,0) 100%);/* Opera 11.10+ */
				background: -ms-linear-gradient(270deg, #d5d5d5 0%, rgba(0,0,0,0) 100%);/* IE10+ */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#ffffff', GradientType='1'); /* for IE */
				background: linear-gradient(180deg, #d5d5d5 0%, rgba(0,0,0,0) 100%);/* W3C */
			    content: "";
			    display: block;
			    height: 120px;
			    left: -36px;
			    position: absolute;
			    top: 42px;
			    transform: rotateZ(45deg);
			    width: 130px;
			    z-index: -999;
			}
			&:before{
				background: -moz-linear-gradient(270deg, #d5d5d5 0%, #e5e5e5 100%);/* FF3.6+ */
				background: -moz-linear-gradient(270deg, #f9f9f9 0%, #ebeaec 100%);/* FF3.6+ */
				background: -webkit-gradient(linear, 270deg, color-stop(0%, #f9f9f9), color-stop(100%, #ebeaec));/* Chrome,Safari4+ */
				background: -webkit-linear-gradient(270deg, #f9f9f9 0%, #ebeaec 100%);/* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(270deg, #f9f9f9 0%, #ebeaec 100%);/* Opera 11.10+ */
				background: -ms-linear-gradient(270deg, #f9f9f9 0%, #ebeaec 100%);/* IE10+ */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#ebeaec', GradientType='1'); /* for IE */
				background: linear-gradient(180deg, #f9f9f9 0%, #ebeaec 100%);/* W3C */
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
}